<template>
	<view class="seckill-view">
		<view class="count-down">每日秒杀</view>
		<view class="flex-view">
			<scroll-view scroll-x="true">
				<view class="commodity" v-for="(item,index) in seckill" :key="index" @click="goDetail(item.goods_id,item.video_url)">
					<image :src="item.cover" mode="aspectFill"></image>
					<view>
						<text class="overflow">{{item.title}}</text>
						<text>¥{{item.seckill_price}}</text>
						<text>¥{{item.original_price}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { defineProps } from 'vue'

	const props = defineProps({
		seckill: Array
	})

	// 点击商品跳转详情页
	function goDetail(id, video_url) {
		// 商品有视频 跳转到短视频页面，没有就跳转到详情页
		if (video_url == '') {
			// console.log('跳转详情页')
			uni.navigateTo({
				url: `/pages/goods-detail/goods-detail?goods_id=${id}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/short-video/short-video?goods_id=${id}`
			})
		}
	}
</script>

<style scoped>
	.seckill-view {
		background: linear-gradient(to bottom, #ed7d79 25%, #fceeed 70%);
		border-radius: 20rpx;
		padding: 20rpx 0;
		margin: 30rpx 20rpx 0 20rpx;
	}

	.count-down {
		color: #FFFFFF;
		padding-bottom: 15rpx;
		padding-left: 20rpx;
		font-style: oblique;
		font-weight: bold;
	}

	/* 宫格布局 */
	.flex-view {
		display: flex;
		white-space: nowrap;  /* 不换行 用以横向滚动 */
		margin: 0 20rpx;
	}

	.commodity {
		width: calc(25% - 10rpx*2);
		margin: 10rpx;
		display: inline-block;
	}

	.commodity image {
		width: 100%;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.commodity view {
		width: 90%;
	}

	.commodity view text:nth-child(1) {
		margin: 10rpx 0;
	}

	.commodity view text:nth-child(2) {
		color: #999999;
		font-weight: bold;
	}

	.commodity view text:nth-child(3) {
		text-decoration: line-through;
		font-size: 25rpx;
		color: #bfbfbf;
		padding-left: 10rpx;
	}

	.overflow {
		-webkit-line-clamp: 1 !important;
	}
</style>
